<style lang="less" scoped>
    .qualitycomplaint {
        width: 100%;
        height: auto;
        overflow: hidden;
        text-align: center;
        padding: 8px;
        display: flex;
    }
</style>
<template>
    <div class="qualitycomplaint">
        <card-table
            cardtitle="客诉列表"
            addbuttext="新增客诉信息"
            :columns="columns"
            :selectList="selectList"
            :defaultSelete="defaultSelete"
            :searchForm="searchForm"
            :formItem="formItem"
            @add="add"
            @refresh="refresh"
            @on-current-change="onCurrentChange"
            :data="data">
        </card-table>
        <Modal
            v-model="addmodel"
            title="添加客诉信息"
            :loading="loading"
            @on-ok="modelOk('add')"
            @on-cancel="modelCancel">
            <Form :model="addmodelform" :label-width="80">
                <FormItem label="订单选择:">
                    <Select v-model="addmodelform.onub"  style="width:200px">
                        <Option v-for="item in $store.state.order" :value="item.nub" :key="item.id">
                            <span>{{ item.nub }}</span>
                            <span style="float:right;color:#ccc">{{ item.customernub }}</span>
                        </Option>
                    </Select>
                </FormItem>
                <FormItem label="提交人:">
                    <Input v-model="addmodelform.name" placeholder="提交人员姓名"></Input>
                </FormItem>
                <FormItem label="提交人:">
                    <Input v-model="addmodelform.msg" type="textarea" placeholder="输入说明"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="editmodel"
            title="修改客诉信息"
            :loading="loading"
            @on-ok="modelOk('edit')"
            @on-cancel="modelCancel">
            <Form :model="editmodelform" :label-width="80">
                <FormItem label="提交人:">
                    <Input v-model="editmodelform.name" placeholder="提交人员姓名"></Input>
                </FormItem>
                <FormItem label="提交人:">
                    <Input v-model="editmodelform.msg" type="textarea" placeholder="输入说明"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
    import CardTable from '../components/cardTable.vue'
    import MyCard from '../components/myCard.vue'
    import qualitydata from './qualitydata.js'
    import qualitydata2 from './qualitydata2.js'
    export default {
        name: 'qualitycomplaint',
        data () {
            return {
                role:false,
                columns: [
                    {
                        title: '订单单编号',
                        key: 'onub',
                        width: 180
                    },
                    {
                        title: '客诉信息',
                        key: 'msg'
                    },
                    {
                        title: '客诉人',
                        key: 'name',
                        width: 150
                    },
                    {
                        title: '提交时间',
                        key: 'time',
                        width: 180
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: 'text'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    'click': () => {
                                        if (!this.role) {
                                            this.$Notice.error({
                                                title: '权限不足!',
                                                desc: ''
                                            });
                                            return
                                        }
                                        this.editmodelform = JSON.parse(JSON.stringify(params.row))
                                        this.editmodel = true
                                    }
                                }
                            }, '编辑');
                        }
                    }
                ],  //  表格列
                data: [],  //  表格数据
                selectList: [
                    {
                        label: '订单编号',
                        value: 'onub'
                    },
                    {
                        label: '提交时间',
                        value: 'time'
                    },
                    {
                        label: '提交人',
                        value: 'name'
                    },
                    {
                        label: '提交信息',
                        value: 'msg'
                    }
                ],  //  搜索下拉列表
                defaultSelete: 'onub',  //  搜索下拉列表默认值
                searchForm: {
                    'onub': '',
                    'name': '',
                    'time': '',
                    'msg': ''
                },  //  搜索下拉列表默认值
                formItem: [
                    {
                        label: '订单编号',
                        key: 'onub',
                        placeholder: '输入编号'
                    },
                    {
                        label: '提交时间',
                        key: 'time',
                        placeholder: '输入提交时间'
                    },
                    {
                        label: '提交人',
                        key: 'name',
                        placeholder: '输入提交人'
                    },
                    {
                        label: '信息',
                        key: 'msg',
                        placeholder: '输入品质信息'
                    }
                ],  //  搜索表单item
                current: null,
                loading: true,
                addmodel: false,
                addmodelform: {
                    onub: '',
                    msg: '',
                    name: ''
                },
                editmodel: false,
                editmodelform: {
                    name: '',
                    msg: ''
                }
            }
        },
        watch: {
            '$store.state.role': {
                handler: function (val, oldVal) {
                    this.role = this._.find(val, function(chr) {
                        return chr == '71'
                    }) ? true : false
                },
                deep: true
            }
        },
        methods: {
            add () {
                if (!this.role) {
                    this.$Notice.error({
                        title: '权限不足!',
                        desc: ''
                    });
                    return
                }
                this.addmodel = true
            },
            refresh () {
                this.http.complaingetAll(this, {})
            },
            onCurrentChange (current) {
                console.log(current)
                this.current = current
            },
            modelOk (value) {
                if (value == 'add') {
                    this.http.addComplain(this, this.addmodelform)
                } else if (value == 'edit') {
                    this.http.updateComplain(this, this.editmodelform)
                }
            },
            modelCancel () {}
        },
        components: {
            CardTable,
            MyCard
        },
        mounted: function () {
            this.role = this._.find(this.$store.state.role, function(chr) {
                return chr == '71'
            }) ? true : false
            this.http.complaingetAll(this, {})
        }
    };
</script>
